<template>
    <el-card class="box-card" shadow="none">
        <div slot="header" class="clearfix">
            <span><svg-icon iconname="icon-remen"></svg-icon> {{ title }}</span>
            <!-- 记得修改链接 -->
            <el-link :underline="false" style="float: right; "
                @click="() => $router.push({ path: '/user/more_enterprise', query: { user: user, title: title } })">更多<i
                    class="el-icon-arrow-right"></i> </el-link>
        </div>
        <el-row :gutter="20">
            <el-col :span="8" v-for="it in hot_items" :key="it.id" :loading="loading">
                <el-card :body-style="{ padding: '0px' }"
                    @click.native="() => $router.push({ path: '/user/enterprise_detail', query: { id: it.id, title: title, user: user } })">
                    <!-- 记得修改链接 -->
                    <el-image :src="it.img" fit="cover" class="image">
                        <div slot="placeholder" class="image-slot">
                            <el-image :src="'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                                fit="cover" class="image">
                            </el-image>
                        </div>
                    </el-image>
                    <div style="padding: 14px;">
                        <h4>{{ it.name }}</h4>
                        <div class="senic_spot_info">
                            {{ it.introduction }}
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-empty v-if="this.hot_items.length === 0" description="暂无数据"></el-empty>
    </el-card>
</template>

<script>
export default {
    props: {

        user: {
            type: String,
            default: ''
        },

        title: {
            type: String,
            default: '',
        },
        hot_items: {
            type: Array,
            default: '',
        },

        loading: {
            type: Boolean,
            default: true
        }
    },
    methods: {
    }
}
</script>

<style lang="less" scoped>
.image {
    width: 100%;
    max-height: 250px;

    display: block;
}

h4 {
    margin-top: 2px;
    margin-bottom: 10px;
}

.senic_spot_info {
    color: #99a9bf;
    font-size: 0.5em;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    .time_sender {
        color: #99a9bf;
        font-size: 0.5em;
    }
}
</style>